<template>
    <div>
        <el-dialog v-model="showDialog">
            <div class="data_item">
                <div class="phone">
                    电话号码:
                    <label>{{ $store.state.user.phone }}</label>
                </div>
                <div class="sender">
                    收件人:
                    <label>{{ $store.state.user.username }}</label>
                </div>
                <div class="address">
                    收件地址：
                    <input type="text" v-model="address" placeholder="请输入收件地址">
                </div>
                <div class="operation">
                    <button @click="sumbit">确定</button>
                    <button @click="showDialog=false">取消</button>
                </div>
            </div>
        </el-dialog>
        <img style="width: 100%;" src="../../assets/images/newTask/17145281071046940.png" alt="">
        <div class="newtaste" v-if="listdata!==null">
            <div class="newtaste_item" v-for="(item,index) in listdata" :key="index">
                <div class="left">
                    <img :src="require('../../assets/images/'+item.coverImg)" style="width: 80%;height: 80%;padding: 10%;" alt="">
                </div>
                <div class="right">
                    <div class="name">{{ item.goodsName }}</div>
                    <div class="info">{{ item.goodsInfo }}</div>
                    <button @click="apply(item.goodsId)">试用</button>
                </div>
            </div>
        </div>
        <div class="ft_item">
            <div class="left">
                <label>你已选择{{num}}件试用装</label>
            </div>
            <div class="right">
                <button @click="num!==0?showDialog=true:null">即刻申请试用</button>
            </div>
        </div>
    </div>
</template>

<script>
import { applyProduct, newTasteList } from '@/utils/api/goods';

export default{
    data(){
        return {
            listdata:[],
            goodsId:[],
            showDialog:false,
            address:''
        }
    },
    computed:{
        num(){
            return this.goodsId.length
        }
    },
    created(){
        newTasteList().then(data=>{
            this.listdata=data.list
        })
    },
    methods:{
        apply(goodsId){
            this.goodsId.unshift(goodsId)
        },
        sumbit(){
            this.goodsId.map(item=>{
                applyProduct({goodsId:item,address:this.address},this.$store.state.user.token).then(data=>{
                    this.num=0
                    this.goodsId=[]
                    this.showDialog=false
                })
            })
        }
    }
}
</script>

<style>
.data_item div{
    margin: 30px;
    font-size: 18px;
}
.data_item label{
    border: 1px solid #bbb;
    padding: 5px 10px;
}
.operation button{
    font-size: 16px;
    margin: 0 20px;
    padding: 4px 20px;
}
.operation button:first-child{
    background-color: black;
    color: #fff;
}
.address input{
    width: 100%;
    height: 30px;
    margin: 10px 0;
}
.ft_item{
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    background-color: black;
    color: #fff;
    display: flex;
    align-items: center;
    z-index: 100;
}
.ft_item .left{
    margin: 0 10%;
}
.ft_item .right{
    margin-left: auto;
    margin-right: 40px;
}
.right button{
    padding: 10px 30px;
    font-size: 20px;
    font-weight: bold;
}
.newtaste{
    padding-bottom: 100px;
}
.newtaste_item{
    display: flex;
    flex-direction: row;
    width: 100%;
}
.newtaste_item .left{
    width: 30%;
    aspect-ratio: 1/1;
}
.newtaste_item .right{
    flex: 1;
    font-size: 20px;
    margin: 40px 60px;
}
.right .name{
    font-size: 25px;
    font-weight: bold;
    margin: 20px 0;
}
.right .info{
    margin: 20px 0;
}
.right button{
    background-color: #fff;
    margin: 20px 0;
}
</style>